<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="static/extResources/layui/src/css/layui.css" media="all">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <title>跳转提示</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        body {
            background: #fff;
            font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: #333;
            font-size: 16px;
        }

        header {
            text-align: center;
        }

        .main {
            padding: 10px;
        }

        .content {
            height: 60%;
        }

        .layui-row {
            margin-bottom: 15px;
        }

        .catalogue {
            overflow: hidden;
        }

        .catalogue .layui-card {
            height: 100%;
            box-shadow: none;
        }

        .catalogue .layui-card-header {
            height: 50px;
            text-align: center;
            font-size: 30px;
        }

        .catalogue .layui-card-body {
            height: calc(100% - 50px);
            overflow: scroll;
            overflow-x: hidden;
            padding: 10px 10px 0 10px;

        }

        .catalogue li {
            line-height: 45px;
        }

        #video {
            width: 100%;
            height: calc(100% - 60px);
        }

        .video-info {
            line-height: 30px;
            height: 28px;
            font-size: 22px;
            color: #505050;
            border-bottom: 1px solid #e5e9f0;
            padding-left: 20px;
            padding-top: 10px;
        }

        .video-info i {
            margin-right: 5px;
        }

        @media screen and (max-width: 600px) {
            .content {
                height: auto;
            }

            .catalogue {
                height: 450px;
            }

            #video {
                height: 350px;
            }
        }
    </style>
</head>
<body>
<div class="main">
    <header style="height: 100px;">这里是头部</header>
    <div class="layui-row content layui-col-space10">
        <div class="layui-col-md9">
            <div id="video"></div>
            <div class="video-info" style="height: 60px;background-color: #F2F2F1">
                <div class="ops">
                    <span title="点赞数12445" class="like">
                        <i class="fa fa-thumbs-up"></i>1.2万
                    </span>
                    <span title="播放数" class="coin">
                        <canvas width="34" height="34" class="ring-progress"
                            style="width:34px;height:34px;left:-3px;top:-3px;"></canvas>
                        <i class="fa fa-play-circle"></i>1.3万
                    </span>
                    <span title="收藏人数" class="collect">
                        <canvas width="34" height="34" class="ring-progress"
                            style="width:34px;height:34px;left:-3px;top:-3px;"></canvas>
                        <i class="fa fa-star"></i>1.2万
                    </span>
                </div>
            </div>
        </div>
        <div class="layui-col-md3 catalogue">
            <div class="layui-card">
                <div class="layui-card-header">
                    章节目录
                </div>
                <div class="layui-card-body">
                    <ul>
                        <li>
                            <a href="javascript:;">第一节</a>
                        </li>
                        <li>
                            <a href="javascript:;">第二节</a>
                        </li>
                        <li>
                            <a href="javascript:;">第三节</a>
                        </li>
                        <li>
                            <a href="javascript:;">第四节</a>
                        </li>
                        <li>
                            <a href="javascript:;">第一节</a>
                        </li>
                        <li>
                            <a href="javascript:;">第二节</a>
                        </li>
                        <li>
                            <a href="javascript:;">第三节</a>
                        </li>
                        <li>
                            <a href="javascript:;">第四节</a>
                        </li>
                        <li>
                            <a href="javascript:;">第一节</a>
                        </li>
                        <li>
                            <a href="javascript:;">第二节</a>
                        </li>
                        <li>
                            <a href="javascript:;">第三节</a>
                        </li>
                        <li>
                            <a href="javascript:;">第四节</a>
                        </li>
                        <li>
                            <a href="javascript:;">第一节</a>
                        </li>
                        <li>
                            <a href="javascript:;">第二节</a>
                        </li>
                        <li>
                            <a href="javascript:;">第三节</a>
                        </li>
                        <li>
                            <a href="javascript:;">第四节</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-clear"></div>
    <hr class="layui-bg-cyan">
    <div class="layui-row comment" style="height: 200px;margin-top: 20px;">
        这里是评论区
    </div>
</div>
<script type="text/javascript" src="static/tools/ckplayer/ckplayer/ckplayer.js"></script>
<script type="text/javascript">
    let videoObject = {
        container: '#video',//“#”代表容器的ID，“.”或“”代表容器的class
        variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
        flashplayer: false,//如果强制使用flashplayer则设置成true
        video: '/static/video/20191219164801.mp4'//视频地址
    };
    let player = new ckplayer(videoObject);
</script>
<script src="static/extResources/layui/src/layui.all.js" type="text/javascript"></script>
<script>
    layui.use(['layer', 'element'], function () {
        let $ = layui.jquery
            , layer = layui.layer
            , element = layui.element
        ;

        element.init();
    })
</script>
</body>
</html>
</div>
